<template>
  <div class='recentlyPlayedSong'>
    <div
      class="songShowList"
    >
      <!-- 单个列表展示组件 -->
      <song-show
        v-for="(songs, index) in list"
        :key="songs.id"
        :song="songs.data"
        :index="index"
        @storagePlayingSongList="storagePlayingSongList"
      />
      <!-- /单个列表展示组件 -->
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getRecentlyPlayedSong } from '@/api/user'
import songShow from '@/components/songComponent/songShow'

export default {
  name: 'recentlyPlayedSong',
  components: {
    songShow
  },
  props: {},
  data () {
    return {
      list: [],
      listData: [],
      musicData: {
        al: {
          picUrl: false
        }
      },
      index: 0
    }
  },
  computed: {
    ...mapState(['loginData'])
  },
  watch: {},
  created () {
    this.loadGetRecentlyPlayedSong()
  },
  mounted () {},
  methods: {
    async loadGetRecentlyPlayedSong () {
      const { data } = await getRecentlyPlayedSong({
        cookie: this.loginData.cookie
      })
      this.list.push(...data.data.list)
      this.$emit('songCount', this.list.length)
      for (var index in this.list) {
        this.listData[index] = this.list[index].data
      }
      this.$emit('storagesList', this.listData)
    },
    // 点击播放后，将获取的列表数据存入播放歌曲列表内（store）
    storagePlayingSongList () {
      this.$store.commit('setPlayingSongList', this.listData)
    }
  }
}
</script>
<style lang='less' scoped>
.recentlyPlayedSong {
  height: 100vh;
  background: rgb(245, 245, 245);
}
</style>
